<template>
  <div class="addPage-wrapper">
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      :visible.sync="addPageGroupVisible">
      <el-form :model="inputForm"
               ref="inputForm" v-loading="loading"
               class="addPage-form"
               :class="method==='view'?'readonly':''"
               :disabled="method==='view'"
               :rules="rules"
               label-width="106px">
        <el-form-item label="页面编号：" required>
          <el-input v-model="inputForm.pageCode" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="页面名称：" required>
          <el-input v-model="inputForm.pageName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="分组名称：" prop="names" required>
          <el-input v-model="inputForm.names"></el-input>
        </el-form-item>
        <!--<el-form-item label="状态:" required>
          <el-radio v-model="inputForm.state" :label="1">启用</el-radio>
          <el-radio v-model="inputForm.state" :label="0">禁用</el-radio>
        </el-form-item>
        <el-form-item label="排序:" required class="sort-num">
          <el-input v-model="inputForm.sorts">
            <template slot="append">
              <div class="num-change">
                <div class="add" @click="onIncrease"><i class="el-icon-arrow-up"></i></div>
                <div class="sub" @click="onReduce"><i class="el-icon-arrow-down"></i></div>
              </div>
            </template>
          </el-input>
        </el-form-item>-->
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="addPageGroupVisible = false">取消</el-button>
      <el-button type="primary" v-if="method != 'view'" @click="doSubmit('inputForm')" v-noMoreClick>确定</el-button>
    </span>
    </el-dialog>

  </div>

</template>

<script>
    export default {
      name: 'addPageGroup',
      data () {
        return {
          addPageGroupVisible: false,
          title: '',
          inputForm: {
            id: '',
            pageCode: '',
            pageName: '',
            names: '',
            state: 1,
            sorts: 1,
            modelId: ''
          },
          loading: false,
          method: '',

          rules: {
            names: [{ required: true, message: '分组名不能为空', trigger: 'blur' }]
          }
        }
      },
      methods: {
      	handleClose(done) {
			this.$Msg.confirm({
				title:'您确定要关闭吗？',
				content:this.GLOBAL.FORM_CLOSE_TIPS,
				confirmCall:()=>{
					done();
				}
			})
		},
        init (method, obj, modelId, pageGroup) {
          this.addPageGroupVisible = true
          this.inputForm.modelId = modelId
          this.loading = false
          this.$set(this.inputForm, 'pageName', obj.pageName)
          this.$set(this.inputForm, 'pageCode', obj.pageCode)
          if (method === 'add') {
            this.title = '新增页面分组'
          } else if (method === 'edit') {
            this.title = '修改页面分组'
            this.$set(this.inputForm, 'names', pageGroup.groupName)
            this.$set(this.inputForm, 'id', pageGroup.groupId)
            this.getGroupInfo(this.inputForm.id)
          }
        },
        getGroupInfo (groupId) {
          this.$http({
            url: '/model/getGroupId',
            method: 'get',
            params: {
              id: groupId
            }
          }).then(({data}) => {
            console.log('aaaa', data)
            // this.pageGroupList = data.result
          })
        },
        onIncrease () {
          this.inputForm.sorts++
        },
        onReduce () {
          if (this.inputForm.sorts > 1) {
            this.inputForm.sorts--
          }
        },
        // 表单提交
        doSubmit (formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              console.log('input', this.inputForm)
              this.loading = true
              this.$http({
                url: `/model/groupSave`,
                method: 'post',
                data: this.inputForm
              }).then(({data}) => {
                if (data && data.code === '200') {
                  this.addPageGroupVisible = false
                  this.$message.success(data.message)
                  this.$emit('refreshDataList')
                }
              })
            }
          })
        }
      }
    }
</script>

<style lang="scss" scoped>
.addPage-wrapper{
    ::v-deep.el-dialog__wrapper .el-dialog{
      width: fit-content !important;
      .el-dialog__header{
        padding: 0 20px !important;
        height: 41px;
        line-height: 41px;
      }
      .el-dialog__headerbtn{
        top: 11px;
      }
      .el-dialog__title{
        font-size: 16px;
        color: #333333;
      }
      .el-dialog__body{
        padding: 20px 50px!important;
        .addPage-form{
          .el-form-item__label,.el-form-item__content{
            line-height: 32px;
          }
          .el-input{
            height: 32px;
            input {
              height: 32px;
              width: 320px;
              border: 1px solid #AAAAAA;
              border-radius: 4px;
              color: #333333;
              padding: 0 10px !important;
            }

            input:hover, input:focus {
              border-color: #1890ff;
            }

            .el-input__inner::-webkit-input-placeholder {
              color: #999999;
            }
          }
          .el-input.is-disabled{
            input:hover, input:focus {
              border-color: #AAAAAA;
            }
          }
          .sort-num{
            input{
              width: 83px;
              border-right: none;
              border-top-right-radius: 0;
              border-bottom-right-radius: 0;
            }
            .el-input-group{
              width: inherit;
            }
            .el-input-group__append{
              height: 32px;
              padding: 0;
              width: 27px;
              text-align: center;
              border:1px solid #AAAAAA;
              .num-change{
                font-size: 12px;
                line-height: 12px;
                .add,.sub{
                  height: 14px;
                }
              }
            }
          }

        }

      }
  }
}
</style>
